/* eslint-disable */
/**
 * 表格上方筛选条件升级版
 */
import {Form, Input, Select, Button, DatePicker, Row, Col, Tag, TreeSelect,Cascader} from 'antd';
import React, {Component} from 'react';
import moment from 'moment';
import config from '../../config';
import Util from '../../utils/Util';
import echarts from 'echarts';
import CheckItemsInFiltrate from './CheckItemsInFiltrate';
import styles from './FiltrateUpgrade.less';
import MyIcon from '../../components/common/MyIcon';
import {Link,} from 'dva/router';
import AreaSelect from './AreaSelect';
const {RangePicker, MonthPicker} = DatePicker;
const FormItem = Form.Item;
const {CheckableTag} = Tag;

function disabledDate(current) {
  // 当天以后时间禁选,组件传值   disabledDate:true
  return current && current.valueOf() > Date.now();
}

class FiltrateUpgrade extends Component {
  state = {
    startValue: null,
    endValue: null,
    endOpen: false,
    checkBtnItems: this.props.checkBtnConfig ? this.props.checkBtnConfig.items : []
  };

  componentDidMount() {
    let t = this;
    t.setState({
      params: t.props.form.getFieldsValue()
    });
  }

  submit() {
    let t = this;
    // Form 组件参数
    let params = t.props.form.getFieldsValue();
    let {submit} = t.props;
    submit(params);
  }

  

  onSubmit = () => {
    let t = this;
    // Form 组件参数
    let params = t.props.form.getFieldsValue();
    let {onSubmit} = t.props;
    onSubmit(params);
  }



  // 清空 Form 组件输入的内容
  clearForm() {
    let t = this;
    if (this.state.checkBtnItems && this.state.checkBtnItems.length > 0) {
      let checkBtnItems = [...this.state.checkBtnItems];
      checkBtnItems.map((item, index) => {
        item.status = false;
      });
      this.setState({
        checkBtnItems
      });
    }
    if (t.props.isMyClear === true) {
      let {myClearBtn} = t.props;
      t.props.form.resetFields();
      myClearBtn();
    } else {
      t.props.form.resetFields();
    }

  }

  // 额外按钮点击事件
  extraBtnClick(btnIndex) {
    let t = this;
    let funNameStr = t.props.extraBtn[btnIndex].funName;
    t.props[funNameStr]();
  }

  // 搜索下方按钮点击事件
  underBtnClick(btnIndex, funName) {
    let t = this;
    if (funName)
      t.props[funName]();
  }

  selectedChange = (fun, nextParams, paramName,nextParams2, value) => {
    let t = this;
    let params = {};
    params[paramName] = value;
    if (paramName) {
      t.setState({params}, () => {
        console.log(t.state, 'state')
        let {selectedChange} = this.props
        selectedChange(params)
      });
    }
    if (typeof fun === "function") {
      fun(value);
      if (nextParams)
        t.props.form.setFieldsValue({
          [nextParams]: ''
        })
      if (nextParams2)
        t.props.form.setFieldsValue({
          [nextParams2]: ''
        })
    }
  }

  // 筛选条件组件change事件
  getChangeValue(value, e) {
    
    let t = this;
    let params = {};
    params[value] = e.target.value;
   
    t.setState({params});
  }

  onChange = (field, value) => {
    this.setState({
      [field]: value,
    });
  };

  onStartChange = (value) => {
    this.onChange('startValue', value);
  };

  onEndChange = (value) => {
    this.onChange('endValue', value);
  };
  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({endOpen: true});
    }
  };

  handleEndOpenChange = (open) => {
    this.setState({endOpen: open});
  };
  disabledStartDate = (startValue) => {
    const endValue = this.state.endValue;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  };

  disabledEndDate = (endValue) => {
    const startValue = this.state.startValue;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  };

  render() {
    let t = this;
    let {checkBtnItems} = t.state;
    let {underItems} = t.props;
    const {items} = this.props
    let extraBtn = t.props.extraBtn || [];
    let {getFieldDecorator,setFieldsValue} = t.props.form;
    // 是否显示清空按钮 默认显示
    let clearBtnShow = true;
    if (t.props.clearBtn === 'hide') {
      clearBtnShow = false;
    }
    // 是否显示查询按钮 默认显示
    let submitBtnShow = true;
    if (t.props.submitBtn === 'hide') {
      submitBtnShow = false;
    }

    var containerHeight 
    if (document.getElementById('filtrate-container')) {
      containerHeight = document.getElementById('filtrate-container').clientHeight;
      console.log(document.getElementById('filtrate-container').clientHeight)
    }


    return (
      <div className={styles.base} style={{height:this.props.height}}>
        <Form layout="inline" key="myForm">
          <div id="filtrate-container" className={styles.searchBase}>
            {/*搜索条件*/}
            <div>
              {
                items.map((item, index) => {
                  if (item.type === 'input') {
                    return (<FormItem label={item.label} key={index} className={item.className} style={item.formItemStyle}>
                      {
                        getFieldDecorator(item.paramName, {
                          initialValue: item.initialValue ? item.initialValue : '',
                          rules: item.rules || null
                        })(
                          <div>
                            <Input onChange={t.getChangeValue.bind(t, item.paramName)} size={config.size} style={item.style}
                                 placeholder={item.placeholder} disabled={item.disabled}></Input><span style={{marginLeft:2}}>{item.unit}</span>
                          </div>
                          
                        )
                      }
                    </FormItem>)
                  } else if (item.type === 'select') {
                    return (<FormItem label={item.label} key={index} className={item.className} style={item.formItemStyle}>
                      {
                        getFieldDecorator(item.paramName, {
                          initialValue: item.initialValue ? item.initialValue : (item.options[0] ? Util.numToString(item.options[0].value) : item.options[0]),
                        })(
                          <Select
                            size={config.size}
                            
                            showSearch
                            mode={item.mode}
                            style={item.style ?item.style: {}}
                            optionFilterProp="children"
                            dropdownMatchSelectWidth={t.props.dropdownMatchSelectWidth}
                            onChange={t.selectedChange.bind(t, item.selectChange, item.nextParamName || false, item.paramName,item.nextParamName2 || false)}
                            disabled={item.disabled}
                          >
                            {
                              item.options.map(option => {
                                return (
                                  <Select.Option key={option.value}
                                                 value={Util.numToString(option.value)}
                                  >
                                    {option.text}
                                  </Select.Option>

                                )
                              })
                            }
                          </Select>
                        )
                      }
                    </FormItem>)
                  } else if (item.type === 'treeSelect') {
                    return (
                      <FormItem key={item.paramName} label={item.label} colon={item.colon} style={item.formItemStyle}>
                        {
                          getFieldDecorator(item.paramName, {
                            initialValue: item.initialValue || '',
                            rules: item.rules || []
                          })(
                            <TreeSelect
                              showSearch={item.showSearch}
                              treeNodeFilterProp={'title'}
                              size={config.size}
                              onChange={item.onChange}
                              disabled={item.disabled}
                              treeData={item.options}
                              style={item.styles || {}}
                              dropdownStyle={{height: `${item.height}`}}
                              treeCheckable={item.treeCheckable}
                              onSelect={item.onSelect}
                            />
                          )}
                      </FormItem>
                    )
                  }
                  else if(item.type==='areaSelect'){
                    return <AreaSelect item={item} getFieldDecorator={getFieldDecorator} setFieldsValue={setFieldsValue}/>
                  }
                  else if (item.type === 'rangePicker') {

                    let disabled = item.disabledDate ? disabledDate : null;

                    return (<FormItem className={item.showTime ? '' : styles['range-picker']}
                                      label={item.label}
                                      key={index}>
                      {
                        getFieldDecorator(item.paramName, {
                          initialValue: item.initialValue === null ? null : (item.initialValue && item.initialValue.length === 2 ? [moment(item.initialValue[0]), moment(item.initialValue[1])] : [moment().add(-1, 'months'), moment()])
                        })(
                          <RangePicker
                            showTime={item.showTime}
                            style={{width: item.width}}
                            format={item.format}
                            size={config.size}
                            disabledDate={disabled}
                            disabled={item.disabled}>
                          </RangePicker>
                        )
                      }
                    </FormItem>)
                  } else if (item.type === 'datePicker') {
                    let disabled = item.disabledDate ? disabledDate : null;
                    return (<FormItem className={styles.datePicker} label={item.label}
                                      key={index}>
                      {
                        getFieldDecorator(item.paramName, {
                          initialValue: item.initialValue ? item.initialValue : null
                        })(
                          <DatePicker size={config.size} disabledDate={disabled} disabled={item.disabled}/>
                        )
                      }
                    </FormItem>)
                  } else if (item.type === 'monthPicker') {
                    return (<FormItem label={item.label}
                                      key={index}>
                      {
                        getFieldDecorator(item.paramName, {
                          initialValue: item.initialValue ? item.initialValue : moment()
                        })(
                          <MonthPicker
                            size={config.size}
                            onChange={t.selectedChange.bind(t, item.selectChange)}
                          />
                        )
                      }
                    </FormItem>)
                  } else if (item.type === 'monthRang') {
                    return (
                      <FormItem label={item.label}
                                key={index}>
                        {
                          getFieldDecorator(item.paramName, {
                            initialValue: item.initialValue || moment().add(-1, 'months')
                          })(
                            <MonthPicker
                              allowClear={false}
                              format="YYYY-MM"
                              disabledDate={this.disabledStartDate}
                              value={this.state.startValue}
                              onChange={this.onStartChange.bind(this)}
                              onOpenChange={this.handleStartOpenChange.bind(this)}
                              size={config.size}>
                            </MonthPicker>
                          )
                        }
                        {
                          getFieldDecorator(item.paramName2, {
                            initialValue: item.initialValue || moment()
                          })(
                            <MonthPicker
                              format="YYYY-MM"
                              disabledDate={this.disabledEndDate}
                              onChange={this.onEndChange.bind(this)}
                              open={this.state.endOpen}
                              value={this.state.endValue}
                              onOpenChange={this.handleEndOpenChange.bind(this)}
                              size={config.size}>
                            </MonthPicker>
                          )
                        }
                      </FormItem>
                    )
                  } else if (item.type === 'selectMultiple') {
                    return (<FormItem label={item.label} key={index}>
                      {
                        getFieldDecorator(item.paramName, {
                          initialValue: [],
                        })(
                          <Select
                            size={config.size}
                            showSearch
                            mode="multiple"
                            optionFilterProp="children"
                          >
                            {
                              item.options.map(option => {
                                return (
                                  <Select.Option key={option.value}
                                                 value={Util.numToString(option.value)}
                                  >
                                    {option.text}
                                  </Select.Option>

                                )
                              })
                            }
                          </Select>
                        )
                      }
                    </FormItem>)
                  }else if (item.type==='cascader'){
                    return(
                      <FormItem label={item.label} key={index}>
                        {
                          getFieldDecorator(item.paramName, {
                            initialValue: [],
                          })(
                            <Cascader
                              size={config.size}
                              options={item.options}
                              loadData={item.loadData}
                              onChange={item.onChange}
                              changeOnSelect
                              placeholder={item.placeholder}
                              allowClear={false}
                            >
                            </Cascader>
                          )
                        }
                      </FormItem>
                    )
                  }

                })
              }
            </div>

            {/*搜索按钮*/}
            <div className={'btn-group-inline'}>
              {
                submitBtnShow && <Button size={config.size}
                                         type="primary"
                                         onClick={t.submit.bind(t)}
                >
                  运行
                </Button>
              }
              {
                clearBtnShow && <Button size={config.size}
                                        type="default"
                                        onClick={t.clearForm.bind(t)}
                >
                  重置
                </Button>
              }

            </div>
          </div>

          <div>
            {t.props.checkBtnShow &&
            <FormItem label={t.props.checkBtnConfig.label} className={t.props.checkBtnConfig.className}>
              <CheckItemsInFiltrate checkBtnItems={checkBtnItems}
                                    checkBtnParamName={t.props.checkBtnConfig.paramName}
                                    onClick={t.props.checkBtnConfig.onClick}
              />
            </FormItem>
            }
            {
              t.props.remind &&
              <FormItem label={t.props.remind.label} className={styles.remind}>
                {
                  getFieldDecorator(t.props.remind.paramName, {
                    initialValue: t.props.remind.initialValue ? t.props.remind.initialValue : '',
                    rules: t.props.remind.rules || null
                  })(
                    <Input onChange={t.getChangeValue.bind(t, t.props.remind.paramName)} size={config.size}
                           placeholder={t.props.remind.placeholder} disabled={t.props.remind.disabled}
                           addonBefore={t.props.remind.addonBefore} addonAfter={t.props.remind.addonAfter}/>
                  )
                }
              </FormItem>
            }
            {
              t.props.remindBtn &&
              <Button size={config.size}
                      style={{marginLeft: 20, marginTop: 8}}
                      type="primary"
                      className={styles.button}
                      onClick={t.props.remindBtnClick.bind(t)}
              >
                确认
              </Button>
            }
          </div>
          {
            this.props.bc &&
            <Button   type="primary" style={{width:"50%",marginLeft:"25%"}}    onClick={t.submit.bind(t)}> 保存 </Button>
          }
        </Form>
      </div>
    )
  }
}

export default  Form.create()(FiltrateUpgrade);
